<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--使用名为viewport的meta值，其content指定自适应设备的宽度--> 
<meta name="viewport"  content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<title>用户信息登记</title>
</head>
<body>

<div data-role="page" data-theme="d">
  <div data-role="header">
  <h1>用户信息</h1>
  </div>
   <!--创建一个可折叠的表单-->
  <div data-role="content">
    <form method="post" action="demoform.php">
      <!--将所有的表单内容包含在一个fieldset中，然后为fieldset应用折叠-->
      <fieldset data-role="collapsible" data-collapsed-icon="arrow-d"
       data-expanded-icon="arrow-u" data-mini="true">
        <!--折叠按钮的标题-->
        <legend>请单击这里展开表单界面输入用户信息</legend>
          <label for="name">全名：</label>
          <input type="text" name="text" id="name">
          <p>喜爱的颜色：</p>
         <!--将控件进行垂直分组-->
        <div data-role="controlgroup">
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue">
        </div>	
      <input type="submit" data-inline="true" value="提交">
      </fieldset>
    </form>
  </div>
  <!--页脚区域-->
  <div data-role="footer" data-position="fixed">
    <h1>用户信息登记表单</h1>
  </div>  
</div>

</body>
</html>
